<template>
	<div class="liveRoom">
		<div class="container-self">
			<!--房间头部-->
			<div class="roomHearder">
				<!--用户头像-->
				<div class="userAvatar">
					<el-avatar @click.native="toPersonCenter" :size="70" style="cursor:pointer;"
						:src="userInfo.userPicture"></el-avatar>
				</div>
				<!--房间标题-->
				<div class="roomTitle">
					<div>

						<h4 v-if="isme==false" class="room-title" style="float: left;">{{roominfo.title}}</h4>
						<div v-if="isme==true">
							<el-input style="float: left;" v-model="roominfo.title" placeholder="请输入标题" />
							<el-button v-if="isme==true" type="success" @click="updataRoom('name',roominfo.title)"
								size="small" style="height: 28px;float: left;">修改直播间名称</el-button>
						</div>

						<div class="room-user" style="clear: both;">
							主播：{{userInfo.userName}}
							<!-- <el-tag type="info" size="small" effect="dark" v-if="isLive === 0">未开播</el-tag> -->
						</div>

					</div>
					<el-button v-if="isme==true" type="success" @click="createHostLive('s')" size="small"
						style="height: 35px">屏幕分享开播</el-button>
					<el-button v-if="isme==true" type="success" @click="createHostLive('v')" size="small"
						style="height: 35px">摄像头开播</el-button>

					<el-button v-if="isme==true" type="success" @click="start()" size="small" style="height: 35px">开始录制
					</el-button>
					<el-button v-if="isme==true" type="danger" @click="stop()" size="small" style="height: 35px">结束录制
					</el-button>

					<el-button v-if="isme==true" type="danger" @click="leaveLive" size="small" style="height: 35px">下播
					</el-button>

					<el-button v-if="isme" @click="openms()" type="success" size="small" style="height: 35px">发起秒杀
					</el-button>
					<el-button v-if="!isme" @click="opengetms()" type="success" size="small" style="height: 35px">参与秒杀
					</el-button>

				</div>
				<div class="clearFix"></div>
			</div>
			<!--直播内容-->
			<div class="content">
				<!--直播屏幕-->
				<!--主播-->
				<div class="screenContent" v-if="userInfo.userType=='host'">
					<!--弹幕-->
					<div class="barrage">
						<ul v-for="(item,index) in barrage" :key="index">
							<li class="barrageLi" ref="barrageInfo">{{item}}</li>
						</ul>
					</div>
					<div class="liveScreen" id="localStream" v-loading="screenLoading" element-loading-text="直播间创建中...">
					</div>
				</div>
				<!--观众屏幕-->
				<div class="screenContent" v-else>
					<!--弹幕-->
					<div class="barrage">
						<ul v-for="(item,index) in barrage" :key="index">
							<li class="barrageLi" ref="barrageInfo">{{item}}</li>
						</ul>
					</div>
					<div class="liveScreen" id="localStream2">

					</div>
				</div>
				<!--聊天框-->
				<div class="chat">
					<!--聊天屏幕-->
					<div class="chatScreen" ref="chatScreen">
						<ul v-for="(item,i) in chatScreenLive" :key="i">
							<li ref="chatli">{{item}}</li>
						</ul>
					</div>
					<!--聊天输入框-->
					<div class="chatInput">
						<el-input v-if="userInfo.username" placeholder="开始聊天吧~" maxlength="25" show-word-limit
							@keyup.enter.native="sendMsg" v-model="chatInfo" class="input-with-select" ref="input"
							:disabled="sendInterval">
							<el-button slot="append" @click="sendMsg">发送</el-button>
						</el-input>
						<el-input v-else placeholder="请先登录噢~" class="input-with-select" disabled>
						</el-input>
					</div>
				</div>
				<div class="clearFix"></div>
			</div>
			<el-row v-if="isme==false">
				<el-col :span="3" v-for="(o,index) in gift" :key="index">
					<el-card :body-style="{ padding: '0px' }" style="text-align: center;">
						<img :src="o.giftPicture" style="width: 50%;margin: auto;">
						<div style="padding: 14px;">
							<span>{{ o.giftName }}----{{o.giftPrice}}积分</span>
							<div class="bottom clearfix">
								<!-- <time class="time">{{ o.giftName }}</time> -->
								<el-button type="text" class="button" @click="sendGift(o.giftId)">发送礼物</el-button>
							</div>
						</div>
					</el-card>
				</el-col>
			</el-row>
			<!--直播简介-->
			<div class="liveInfo">
				<room-tabs>
					<div slot="channelSum" v-if="isme==false">
						<div slot="channelSum" v-html="roominfo.roomSum"></div>
						<div slot="channelSum" v-if="!roominfo.roomSum">这个主播太懒了，还没有写直播简介呢~(*╹▽╹*)</div>
						<!-- <div slot="userSum">{{hostPersonalSum || '暂无简介，这个人很神秘呢~'}}</div> -->
					</div>
					<div slot="channelSum" v-if="isme==true">
						<el-input slot="channelSum" style="float: left;" v-model="roominfo.roomSum" type="textarea" />
						<el-button v-if="isme==true" type="success" @click="updataRoom('sum',roominfo.roomSum)"
							size="small" style="height: 28px;float: left;margin-top: 1.25rem;">修改直播间名称</el-button>
					</div>

				</room-tabs>

			</div>
		</div>

		<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
			<el-form ref="form" :model="form" label-width="80px">
				<!-- <el-form-item label="主播id" prop="userId">
		      <el-input v-model="form.userId" placeholder="请输入主播id" />
		    </el-form-item> -->
				<el-form-item label="商品名称" prop="seckillName">
					<el-input v-model="form.seckillName" placeholder="请输入商品名称" :disabled="!isme" />
				</el-form-item>
				<el-form-item label="数量" prop="seckillNum">
					<el-input v-model="form.seckillNum" placeholder="请输入数量" :disabled="!isme" />
				</el-form-item>
				<el-form-item label="开始时间" prop="startTime">
					<el-date-picker clearable size="small" v-model="form.startTime" type="date"
						value-format="yyyy-MM-dd" placeholder="选择开始时间" :disabled="!isme">
					</el-date-picker>
				</el-form-item>
				<el-form-item label="截至时间" prop="endTime">
					<el-date-picker clearable size="small" v-model="form.endTime" type="date" value-format="yyyy-MM-dd"
						placeholder="选择截至时间" :disabled="!isme">
					</el-date-picker>
				</el-form-item>
				<!-- <el-form-item label="备注" prop="memo">
		      <el-input v-model="form.memo" placeholder="请输入备注" />
		    </el-form-item> -->
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="fqms()" v-show="!mson&&isme">确 定</el-button>
				<el-button type="primary" @click="qg()" v-show="!qson&&!isme">立即抢购</el-button>
				<el-button type="primary" v-show="qson&&!isme">已参与</el-button>
		 	<el-button @click="cancel">关 闭</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script src="./liveRoom.js"></script>

<style scoped lang="scss">
	@import "liveRoom";
</style>
